<template>
<div>
	<content_top title="现金日记账" nextMonth="1" @sendMonthDate="getMonthDate"></content_top>
	
	
	<div class="g_box">
		<div class="g_head">
			<h3>筛选查询</h3>
			<div class="g_box_right">
				<ButtonGroup class="g_act_box">
					<Button @click="qurey">查询结果</Button>
				</ButtonGroup>
				<div class="g_other">
					<a @click="clear_filter">清除筛选</a>
				</div>
			</div>
		</div>
		<div class="g_box_con" style="padding:20px;">
			<Form  :label-width="90" style="width: 100%" inline>
				
				<FormItem label="地区：">
					<region_list v-model="filter.region" field="name" style="width:150px;"></region_list>
				</FormItem>
				<FormItem label="公司主体：">
					<company_list v-model="filter.company" field="sx_name" style="width:150px;"></company_list>
					
				</FormItem>
				<FormItem label="承担部门：">
					<bumen_filter v-model="filter.bumen" field="name" style="width:150px;"></bumen_filter>
				</FormItem>
				<FormItem label="费用科目：">
					<subject_filter v-model="filter.subject" field="name" style="width:150px;"></subject_filter>
				
				</FormItem>
				<FormItem label="币种：">
					<currency_filter v-model="filter.bz" field="name" style="width:150px;"></currency_filter>
				</FormItem>
				<FormItem label="时间：">
					<DatePicker type="month" :value="filter.date_month" placeholder="选择月份" style="width: 150px" @on-change="month_change"></DatePicker>
				</FormItem>
				
				<FormItem label="关键词搜索：">
					<Input v-model="filter.keyword" placeholder="请输入关键词"></Input>
				</FormItem>
			</Form>
		</div>
	</div>
	
	<div class="g_box">
		<div class="g_head">
			<h3>数据列表</h3>
			<span>
				上月结余：<span style="color:#1ABC9C;">{{info.mark}}{{info.total_before}} </span> 
				支出总额：<span style="color:#1ABC9C;">{{info.mark}}{{info.total_expenses | format}}</span>  
				收入总额：<span style="color:#1ABC9C;">{{info.mark}}{{info.total_income | format}} </span> 
				本月结余：<span style="color:#1ABC9C;">{{info.mark}}{{info.total | format}} </span> 
			</span>
			<div class="g_box_right">
				<ButtonGroup class="g_act_box">
					<Button @click="export_data">导出表格</Button>
					<Button @click="import_data">批量导入</Button>
					<Button @click="add_line">新增记账</Button>
				</ButtonGroup>
				<div class="g_other">
					
				</div>
			</div>
		</div>
		<div class="g_box_con">
			<Table :loading="loading" :columns="Columns" :data="list" style="width: 100%;" :height="500" size="small" :border="true" ref="table">
				<div slot="footer" style="border-top: 1px solid #eee;padding: 0 10px; text-align: right;    font-size: 14px;">
					<div style="float:left;">
						<Button @click="batch_del">批量删除</Button>
					</div>
					<div style="float:right;">
						<Page :total="count" show-elevator show-total @on-change="goto_page" />
					</div>
				</div>
			</Table>
		</div>
	</div>
	
	<upload_box v-model="imports.show" @success="import_success"></upload_box>
	
	<info_box v-model="einfo.show" :isEdit="isEdit" :cinfo="einfo.info" :date_month="einfo.date_month" @success="info_success"></info_box>
</div>
</template>

<script>

import info_box from './info';
import upload_box from './upload_box';
import region_list from '@/themes/components/region_list';
import company_list from '@/themes/components/company_list';
import bumen_filter from '@/themes/components/bumen_filter';
import subject_filter from '@/themes/components/subject_filter';
import currency_filter from '@/themes/components/currency_filter';



export default {
    name: 'cash_list',
	components:{
		info_box,
		upload_box,
		region_list,
		company_list,
		bumen_filter,
		subject_filter,
		currency_filter
	},
    data () {
		let self = this;
        return {
        	isEdit:false,
			einfo:{
				show:false,
				info:{},
				date_month:''
			},
            Columns: [
				{
					type: 'selection',
					width: 50,
					align: 'center',
					//fixed: 'left'
				},
				{
					title: '月',
					key: 'month',
					align: 'center',
                    width: 60
                },
				{
                    title: '日',
					key: 'day',
					align: 'center',
					width: 60,
                },
				{
                    title: '地区',
					key: 'region',
					align: 'center',
					width: 80,
                },
				{
                    title: '承担部门',
					key: 'bumen',
					align: 'center',
					width: 90,
					render: (h, params) => {
						var bumen_fg = params.row.bumen.split(',');
						var scale_fg = params.row.bumen_scale.split(',');
						if(bumen_fg.length>1){
							var ls = [];
							for(var i=0;i<bumen_fg.length;i++){
								ls.push(h('p',bumen_fg[i]+' '+scale_fg[i]+'%'));
							}
						}
						else{
							var ls = params.row.bumen;
						}
						
						
						
						return h('div', ls);
					}
                },
				{
                    title: '收入',
					key: 'income_s',
					align: 'center',
					width: 120,
                },
				{
                    title: '支出',
					key: 'expenses_s',
					align: 'center',
					width: 120,
                },
				{
                    title: '结余',
					key: 'balance',
					align: 'center',
					width: 150,
                },
                {
                    title: '币种',
					key: 'bz',
					align: 'center',
					width: 120,
                },
				{
                    title: '摘要',
					key: 'info',
					align: 'center',
					minWidth: 70,
                },
				{
                    title: '费用科目',
					key: 'subject',
					align: 'center',
					width: 150,
                },
				{
                    title: '凭证编号',
					key: 'certificate',
					align: 'center',
					width: 150,
					
                },
				{
					title:'操作',
					key: 'action',
					align: 'center',
					width:150,
					//fixed: 'right',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									type: 'info',
									size: 'small',
								},
								style: {
									marginRight:'5px'
								},
								on: {
									click: () => {
										self.dbedit(params.row,params.index);
									}
								}
							}, '编辑'),
							h('Button', {
								props: {
									type: 'info',
									size: 'small',
								},
								style: {
									
								},
								on: {
									click: () => {
										self.remove(params.row.id)
									}
								}
							}, '删除')
						]);
					}
				}
            ],
			info:{
				total_before:0,
			},
			list:[],
			page:1,
			count:0,
			loading:false,
			default_filter:{
				date_month:localStorage.cash_balance?localStorage.cash_balance:new Date().Format('yyyy-MM'),
				keyword:'',
				region:'',
				company:'',
				bumen:'',
				subject:'',
				bz:'all',
				type:0
			},
			filter:{
				date_month:localStorage.cash_balance?localStorage.cash_balance:new Date().Format('yyyy-MM'),
				keyword:'',
				region:'',
				company:'',
				bumen:'',
				subject:'',
				bz:'all',
				type:0
			},
			imports:{
				show:false,
			},
			balance_status:0,
			
        };
    },
	
	created(){
		
		this.load_data();
	},
    computed: {
       
    },
	methods:{
		load_data(){
			var self = this;
			
			var postdata = {
				f:this.filter,
				page:this.page,
				source:'chuna_cash'
			};
			
			
			Whttp.load('Chuna/Cash/get_list',postdata,function(result){//console.log(result);return false;
				self.list = result.list;
				self.count = parseInt(result.count);
				self.info = result;
				self.balance_status = result.balance_status;
				self.loading = false;
			});
		},
		goto_page(page){
			this.page = page;
			this.load_data();
		},
		
		qurey(){
			this.page = 1;
			this.load_data();
		},
		import_data(){
			if(this.balance_status){
				alert('当前月份已经结账');
				return;
			}
			this.imports.show = true;
		},
		export_data(){
			var self = this;
			
			var postdata = {
				f:this.filter,
			}
			
			Whttp.load('Chuna/Cash/export_data',postdata,function(result){//console.log(result);return false;
				window.open(result);
				self.$Message.info('导出成功');
				
			});
		},
		month_change(date){
			this.filter.date_month =  date;
		},
		add_line(){
			if(this.balance_status){
				alert('当前月份已经结账');
				return;
			}
			
			this.einfo.info = this.filter;
			this.einfo.info.bz = '人民币';
			this.einfo.date_month = this.filter.date_month;//new Date().Format('yyyy-MM');
			this.einfo.show = true;
			this.isEdit = false;
		},
		dbedit(row,index){
			if(this.balance_status){
				alert('当前月份已经结账');
				return;
			}
			this.einfo.date_month = row.date_month;
			this.einfo.info = this._getData(row);//console.log(this.einfo.info);return false;
			this.einfo.show = true;
			this.isEdit = true;
		},
		remove(id){
			if(this.balance_status){
				alert('当前月份已经结账');
				return;
			}
			
			var self = this;
			if(!confirm('是否删除')){
				return false;
			}
			var postdata = {
				id:id
			};
			Whttp.load('Chuna/Cash/del',postdata,function(result){
				self.load_data();
				self.$Message.info('删除成功');
			});
		},
		info_success(){
			this.einfo.show = false;
			this.page = 1;
			this.filter = this.default_filter;
			this.load_data();
		},
		clear_filter(){
			this.filter = this._getData(this.default_filter);
			this.page = 1;
			this.load_data();
		},
		batch_del(){
			
			if(this.balance_status){
				alert('当前月份已经结账');
				return;
			}
			
			if(!confirm('是否删除')){
				return false;
			}
			var ids = [];
			var sels = this.$refs['table'].getSelection();
			
			for(var i=0;i<sels.length;i++){
				ids.push(sels[i].id);
			}
			
			var self = this;
			var postdata = {
				ids:ids,
				act:this.batch_act
			};
			Whttp.load('Chuna/Cash/batch_del',postdata,function(result){
				self.load_data();
				self.$Message.info('操作成功');
			});
		},
		import_success(result){
			this.imports.show = false;
			this.page = 1;
			this.load_data();
		},
		getMonthDate(val){
			this.info.date_month = val;
			this.filter.date_month = val;
		}
	},
	filters:{      //数据过滤器
	    format:function(value){
	        value = Number(value);
			return value.toFixed(2);
	    }

	}
};
</script>
<style scoped>

</style>